<template>
  <div>
    <div>
      <el-date-picker
        v-model="classRomDate"
        format="yyyy-MM-dd"
        :picker-options="pickerOptions1"
        placeholder="选择一个或多个日期"
        type="dates"
        value-format="yyyy-MM-dd"
        @change="showClassRomDate"
      />
    </div>
    <div style="margin-top: 10px">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column label="日期" prop="scheduling_date" />
        <!-- <el-table-column label="开始时间" prop="name">
          <template slot-scope="scope">
            <div
              v-for="(item, index) in scope.row.item_list"
              :key="index"
              style="margin-top: 10px"
            >
              <el-time-select
                v-model="item.start_time"
                :picker-options="startTimePicker"
                placeholder="起始时间"
              />
            </div>
          </template>
        </el-table-column>
        <el-table-column label="结束时间" prop="name">
          <template slot-scope="scope">
            <div
              v-for="(item, index) in scope.row.item_list"
              :key="index"
              style="margin-top: 10px"
            >
              <el-time-select
                v-model="item.end_time"
                :picker-options="{
                  start: startTimePicker.start,
                  step: startTimePicker.step,
                  end: startTimePicker.end,
                  minTime: item.start_time,
                }"
                placeholder="结束时间"
              />
            </div>
          </template>
        </el-table-column> -->
        <el-table-column label="开始时间" prop="name">
          <template slot-scope="scope">
            <div
              v-for="(item, index) in scope.row.item_list"
              :key="index"
              style="margin-top: 10px"
            >
              <el-time-picker
                v-model="item.start_time"
                format="HH:mm"
                placeholder="起始时间"
                value-format="HH:mm"
              />
            </div>
          </template>
        </el-table-column>
        <el-table-column label="结束时间" prop="name">
          <template slot-scope="scope">
            <div
              v-for="(item, index) in scope.row.item_list"
              :key="index"
              style="margin-top: 10px"
            >
              <el-time-picker
                v-model="item.end_time"
                format="HH:mm"
                placeholder="结束时间"
                value-format="HH:mm"
              />
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" prop="address">
          <template slot-scope="scope">
            <!-- <el-button @click="addItemData(scope.row)">添加</el-button> -->
            <div
              v-for="(item, index) in scope.row.item_list"
              :key="index"
              style="margin-top: 10px"
            >
              <el-button
                circle
                icon="el-icon-delete"
                type="danger"
                @click.native="delItemData(index, scope)"
              />
              <el-button
                v-if="index == 0"
                circle
                icon="el-icon-plus"
                type="primary"
                @click.native="addItemData(index, scope.row)"
              />
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div
      v-permissions="{ permission: ['edit:Scheduling'] }"
      style="margin-top: 10px"
    >
      <el-button type="primary" @click="Submit">保存</el-button>

      <el-button @click="$emit('send')">取消</el-button>
      <el-button v-if="satr" type="danger" @click="deleteScheduling">
        删除排班
      </el-button>
    </div>
  </div>
</template>

<script>
  import { addScheduling, delScheduling } from '@/api/scheduling'
  export default {
    props: {
      startTimePicker: {
        type: Object,
        required: true,
      },
      form: {
        type: Object,
        required: true,
      },
      itemdataeday: {
        type: Array,
        required: true,
      },
    },
    data() {
      return {
        tableData: [],
        timeData: '',
        addDayItems: [],
        pickerOptions1: {
          disabledDate() {
            // return time.getTime() <= Date.now() //设置不可点击时间为今天之前的时间
          },
        },
        classRomDate: '', // 设置多个预约时间是数组类型
        dateStr: '', //多个预约时间
        defaultDate: '',
        forms: {},
        satr: false,
      }
    },
    watch: {
      itemdataeday() {
        if (this.itemdataeday.length > 0) {
          this.satr = true
          this.classRomDate = this.itemdataeday[0].scheduling_date
          this.tableData = this.itemdataeday
        } else {
          this.tableData = []
          this.classRomDate = ''
          this.satr = false
        }
      },
    },

    mounted() {
      this.tableData = []
      this.classRomDate = ''
      if (this.itemdataeday.length > 0) {
        this.satr = true
        this.classRomDate = this.itemdataeday[0].scheduling_date
        this.tableData = this.itemdataeday
      } else {
        this.tableData = []
        this.classRomDate = ''
        this.satr = false
      }
      this.forms = this.form
    },
    methods: {
      // 选择日期
      showClassRomDate(e) {
        if (e != null) {
          this.tableData = []
          e.forEach((j) => {
            this.tableData.push({
              scheduling_date: j,
              item_list: [
                {
                  start_time: '',
                  end_time: '',
                },
              ],
            })
          })
        }
      },
      timeDataChange() {},
      addDayItem() {
        this.addDayItems.push({
          start_time: '',
          end_time: '',
        })
      },
      delDayItem(i) {
        this.addDayItems.splice(i, 1)
      },
      addItemData(i, e) {
        this.tableData.forEach((j) => {
          if (e.scheduling_date == j.scheduling_date) {
            j.item_list.push({
              start_time: '',
              end_time: '',
            })
          }
        })
      },
      delItemData(i, e) {
        this.tableData.forEach((j) => {
          if (e.row.scheduling_date == j.scheduling_date) {
            if (j.item_list.length == 1) {
              this.tableData.splice(e.$index, 1)
            } else {
              j.item_list.splice(i, 1)
            }
          }
        })
      },
      // 保存
      Submit() {
        const forms = {}
        forms.user_id = this.form.user_id
        forms.interval_time = this.form.interval_time

        forms.rest_time = this.form.rest_time
        forms.type = 'day'
        const jy = {
          user_id: '选择员工',
          interval_time: '排班间隔',
          rest_time: '休息时间',
        }

        if (Object.keys(forms).length === 0) {
          this.$message.error('请填写信息')
          return
        } else {
          for (var key in forms) {
            if (forms[key] == '' || forms[key] == null) {
              console.log(key)
              this.$message.error(jy[key])
              return
            }
          }
          if (this.tableData.length == 0) {
            this.$message.error('请填写排班时间段')
            return
          } else {
            // this.tableData.forEach((e) => {
            for (let e of this.tableData) {
              for (let item of e.item_list) {
                for (var keys in item) {
                  if (item[keys] == '' || item[keys] == null) {
                    console.log(keys)
                    this.$message.error('填写排班时间段')
                    return
                  }
                }
              }
            }
          }
        }

        this.tableData.forEach((e) => {
          e.item_list.forEach((j) => {
            if (j.end_time.split(':').length == 2) {
              j.end_time = j.end_time + ':00'
            }
            if (j.start_time.split(':').length == 2) {
              j.start_time = j.start_time + ':00'
            }
          })
        })
        forms.days = JSON.stringify(this.tableData)
        forms.id = this.form.id
        addScheduling(forms)
          .then(() => {
            this.$message({
              message: '排班成功',
              type: 'success',
            })
            this.$emit('showMain', 0)
          })
          .catch(() => {
            this.$message.error('排课失败')
          })
      },
      // Submit1() {},
      // 删除排班信息
      deleteScheduling() {
        const params = {
          id: this.form.id,
          type: 'day',
        }
        delScheduling(params).then(() => {
          this.$emit('showMain', 0)
        })
      },
    },
  }
</script>

<style></style>
